

<template>
  <div class="wrapCenterpx">
    <div class="Dailysale">
      <div class="titleBox">
        <div class="titleLogo">
          <img src="../../../assets/Image/heat.png" alt="" />
          <div>热卖商品</div>
          <!-- <span>超值好货</span> -->
        </div>
        <div class="titleMore">
          <!-- <span>更多</span> -->
          <!-- <el-icon>
            <ArrowRight />
          </el-icon> -->
        </div>
      </div>
      <div class="DailysaleList">
        <div style="display: flex; justify-content: space-between;padding: 0 40px;">
          <div class="list" v-for="(item, index) in HotList" :key="item.id" @click="router.push({path:'/goodsDetail',query:{id: item.id}})">
            <div v-if="index < 2" style="display: flex">
              <img :src="item.image" alt="" />
              <div class="listtwoRight">
                <div class="name">{{ item.product_name }}</div>
                <div class="saleType">
                  {{ item.product_info }}
                </div>
                <div class="Price">
                  <div class="yesPrice"><span class="￥">￥</span>{{ item.price }}</div>
                </div>
                <el-button style="width: 120px; height: 45px">立即购买</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="smallListbox" v-if="HotList && HotList.length > 2">
          <div class="smallList" v-for="item in [HotList[2], HotList[3], HotList[4], HotList[5]]" :key="item.id" @click="router.push({path:'/goodsDetail',query:{id: item.id}})">
            <div class="shopingname">{{ item.product_name }}</div>
            <div class="yesPrice"><span class="￥">￥</span>{{ item.price }}</div> 
            <img :src="item.image" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
     
<script setup>
import {  defineProps, } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
defineProps({
  //子组件接收父组件传递过来的值
  HotList: Array,
});

// const emit = defineEmits(["chageBrand"]);
</script>
     
<style scoped lang="less">
.wrapCenterpx {
  width: 1472px;
  margin: 0 auto;
  margin-top: 40px;

  .Dailysale {
    width: 1472px;
    height: 806px;
    background: #ffffff;
    margin: 0 auto;
    padding: 40px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .titleBox {
      height: 40px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 40px;

      .titleLogo {
        display: flex;
        align-items: center;

        img {
          width: 40px;
          height: 40px;
          margin-right: 12px;
        }

        div {
          font-size: 28px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 600;
          color: #dd2131;
        }
      }

      .titleMore {
        display: flex;
        align-items: center;

        span {
          margin-right: 10px;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
    }

    .DailysaleList {
      flex: 1;
      // background: pink;
      display: flex;
      flex-direction: column;

      //   justify-content: space-between;
      .list:nth-child(1) {
        width: calc(50%);
        border-right: 1px solid #cccccc;
        padding-bottom: 40px;
        box-sizing: border-box;
      }

      .list:nth-child(2) {
        flex: 1;
        // padding-left: 20px;
        padding-left: 40px;
        padding-bottom: 40px;
        box-sizing: border-box;
      }

      .list {
        display: flex;

        .listtwoRight {
          padding-top: 27px;
          padding-left: 40px;
          padding-bottom: 21px;
          box-sizing: border-box;
        }

        // background: #ccc;
        display: flex;
        box-sizing: border-box;
        border-bottom: 1px solid #cccccc;

        img {
          width: 290px;
          height: 290px;
          //   margin-bottom: 40px;
        }

        .name {
          font-size: 24px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-bottom: 10px;
          overflow: hidden; //超出隐藏
          text-overflow: ellipsis; //溢出显示省略号
          white-space: normal; //常规默认，会折行
          display: -webkit-box;
          -webkit-box-orient: vertical; //子元素排列 vertical（竖排）orhorizontal（横排）
          -webkit-line-clamp: 1;
        }

        .saleType {
          width: 280px;
          font-size: 20px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #666666;
          margin-bottom: 36px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-height: 30px;
        }

        .Price {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 40px;

          .yesPrice {
            // text-align: right;
            font-size: 28px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #dd2131;
          }

          .￥ {
            font-size: 20px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
          }
        }
      }

      .smallListbox {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;

        .smallList {
          width: 368px;
          height: 368px;
          //   background: #ccc;
          padding: 30px;
          box-sizing: border-box;
          position: relative;
          border-right: 1px solid #cccccc;
          box-sizing: border-box;

          img {
            width: 308px;
            height: 236px;
            position: absolute;
            bottom: 24px;
          }
        }

        .smallList:nth-child(4) {
          border: none;
        }
      }
    }
  }
}

.yesPrice {
  // text-align: right;
  font-size: 24px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #dd2131;
}

.￥ {
  font-size: 16px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
}

.shopingname {
  font-size: 20px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  margin-bottom: 10px;
  overflow: hidden; //超出隐藏
  text-overflow: ellipsis; //溢出显示省略号
  white-space: normal; //常规默认，会折行
  display: -webkit-box;
  -webkit-box-orient: vertical; //子元素排列 vertical（竖排）orhorizontal（横排）
  -webkit-line-clamp: 1;
}
</style>
     